<template>
	<view>
		<view class="">
			<u-tabs :list="list" :is-scroll="true" active-color="#02B595" inactive-color=" #666666" :bold="bold"
				:current="current" @change="change"></u-tabs>

			<view class="boxa" v-for="(item,index) in orderList" :key="index" @click="goOrder(item.indentId)">
				<view class="flex align-center justify-between padding-lr">
					<view class="flex align-center">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/image/data.png" style="width: 34rpx;height: 38rpx;"></image>
						<view class="margin-left-sm" v-if="item.indentType == 2">预约订单</view>
						<view class="margin-left-sm" v-else>立即用车</view>
					</view>
					<view style="color: #02B595;" v-if="item.indentState == 2">已接单</view>
					<view style="color: #02B595;" v-if="item.indentState == 3">装货中</view>
					<view style="color: #02B595;" v-if="item.indentState == 4">运输中</view>
					<view style="color: #02B595;" v-if="item.indentState == 5">卸货中</view>
					<view style="color: #02B595;" v-if="item.indentState == 6">已完成</view>
					<view style="color: #02B595;" v-if="item.indentState == 7">完成待补费</view>
					<view style="color: #999999;" v-if="item.indentState == 8">已取消</view>
				</view>
				<view class="margin-tb-sm" style="width: 100%;height:1rpx;background: #F2F2F2;"></view>
				<view v-for="(addr,aindex) in item.addressList" :key="addr.addressId">
					
					<view class="addbox bgs margin-lr margin-bottom" v-if="aindex == 0">
						<view class="add_cont">
							<view class="green"></view>
							<view class="add_tit">
								<view>{{addr.address}}</view>
							</view>
						</view>
						<view>
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/image/ladd.png" style="width: 30rpx;height: 35rpx;"></image>
						</view>
					</view>
					
					<view class="addbox bgss margin-lr" v-else-if="aindex == item.addressList.length-1">
						<view class="add_cont">
							<view class="orgin"></view>
							<view class="add_tit">
								<view>{{addr.address}}</view>
							</view>
						</view>
						<view>
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/image/hadd.png" style="width: 30rpx;height: 35rpx;"></image>
						</view>
					</view>
					
					<view class="addbox bg margin-lr margin-bottom" v-else>
						<view class="add_cont">
							<view class="gray"></view>
							<view class="add_tit">
								<view>{{addr.address}}</view>
							</view>
						</view>
						<view>
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/image/lladd.png" style="width: 30rpx;height: 35rpx;"></image>
						</view>
					</view>
					
				</view>
				<!-- <view class="addbox bgs margin-lr margin-bottom">
					<view class="add_cont">
						<view class="green"></view>
						<view class="add_tit">
							<view>{{item.startAddress}}</view>
						</view>
					</view>
					<view>
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/image/ladd.png" style="width: 30rpx;height: 35rpx;"></image>
					</view>
				</view>
				<view class="addbox bg margin-lr">
					<view class="add_cont">
						<view class="orgin"></view>
						<view class="add_tit">{{item.endAddress}}</view>
					</view>
					<view>
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/image/hadd.png" style="width: 30rpx;height: 35rpx;"></image>
					</view>
				</view> -->
				
				<view class="margin-tb-sm" style="width: 100%;height:1rpx;background: #F2F2F2;"></view>
				<view class="flex align-center justify-between padding-lr ">
					<view class="flex align-center">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/image/add.png" style="width: 30rpx;height: 35rpx;"></image>
						<view class="margin-left-xs">距您<text style="color: #3699FF;">{{item.indentDistance}}</text>
						</view>
					</view>
					<view class="flex align-center">预估
						<view style="color: #FF2020;font-size: 32rpx;">
							<text>¥</text><text class="text-bold" style="font-size: 42rpx;">{{item.riderMoney}}</text>
						</view>
					</view>
				</view>
				<view class="flex align-center justify-between margin-lr margin-top">
					<view v-if="item.indentState == 2" @click.stop="closeOrder(item.indentId)" class="btn">取消订单</view>
					<view v-if="item.indentState == 2" @click.stop="arriveAddress(item.indentId)" class="btn1">抵达起点
					</view>
				</view>
			</view>


			<empty v-if="orderList.length == 0"></empty>
		</view>

	</view>
</template>

<script>
	import empty from '@/components/empty'
	export default {
		components: {
			empty
		},
		data() {
			return {
				closeable: true,
				shouhuoma: '',
				list: [{
					name: '全部',
					id: ''
				}, {
					name: '已接单',
					id: 2
				}, {
					name: '装货中',
					id: 3
				}, {
					name: '运输中',
					id: 4
				}, {
					name: '卸货中',
					id: 5
				}, {
					name: '已完成',
					id: 6
				}, {
					name: '完成待补费',
					id: 7
				}, {
					name: '已取消',
					id: 8
				}],
				current: 0,
				bold: false,
				page: 1,
				limit: 10,
				orderList: [], //订单列表
				pages: 1,
				longitude: '', //经度
				latitude: '', //纬度
				indentState: '', //订单状态
				indentNumber: '', //订单号
				arr: []
			}
		},
		onLoad() {

			var that = this
			that.$Request.getT('/app/common/type/338').then(res => { //师傅新订单通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.arr.push(res.data.value)
					}
				}
			})
			that.$Request.getT('/app/common/type/268').then(res => { //订单状态通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.arr.push(res.data.value)
					}
				}
			})
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	success: function(res) {
			// 		console.log('当前位置的经度：' + res.longitude);
			// 		console.log('当前位置的纬度：' + res.latitude);
			// 		that.longitude = res.longitude
			// 		that.latitude = res.latitude

			// 	}
			// });
			// that.taskData()

		},
		onShow() {
			if (uni.getStorageSync('token')) {
				uni.showLoading({
					title: '加载中'
				})
				this.getMyOrderList()
			} else {
				this.orderList = []
			}

		},
		methods: {
			//抵达起点
			arriveAddress(indentId) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认已到达起点？',
					confirmText: '确认',
					complete(ret) {
						if (ret.confirm) {
							let data = {
								indentId: indentId
							}
							that.$Request.postT('/app/indent/riderShipment', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '已抵达起点'
									})
									that.getMyOrderList()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			//取消订单
			closeOrder(indentId) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '取消订单将会被扣保证金',
					complete(ret) {
						if (ret.confirm) {
							let data = {
								indentId: indentId
							}
							that.$Request.postT('/app/indent/riderCancelIndent', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '订单已取消',
										icon: "none"
									});
									that.getMyOrderList()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			//获取我的订单列表
			getMyOrderList() {
				let data = {
					indentState: this.list[this.current].id,
					page: this.page,
					limit: this.limit
				}
				this.$Request.getT('/app/indent/getRiderIndentList', data).then(res => {
					uni.hideLoading()
					uni.stopPullDownRefresh()
					if (res.code == 0) {
						this.pages = res.data.pages
						res.data.records.map(item => {
							if (item.indentDistance > 1) {
								item.indentDistance = item.indentDistance + 'km'
							} else {
								item.indentDistance = (parseFloat(item.indentDistance) * 1000).toFixed(2) +
									"m"
							}
						})
						if (this.page == 1) {
							this.orderList = res.data.records
						} else {
							this.orderList = [...this.orderList, ...res.data.records]
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			//订单详情
			goOrder(indentId) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				uni.navigateTo({
					url: '/my/order/pay?indentId=' + indentId
				})
			},
			//切换订单状态
			change(index) {
				if (uni.getStorageSync('token')) {
					this.current = index;
					this.page = 1
					this.getMyOrderList()
				}

			},
		},
		onReachBottom: function() {
			if (uni.getStorageSync('token')) {
				if (this.page < this.totalCount) {
					this.page += 1;
					this.getMyOrderList()
				}
			}

		},
		onPullDownRefresh: function() {
			if (uni.getStorageSync('token')) {
				this.page = 1;
				this.getMyOrderList()
			} else {
				uni.stopPullDownRefresh()
			}

		},

	}
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}

	.boxa {
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 30rpx;
		padding: 30rpx 0;
	}


	.addbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 110rpx;
		border-radius: 16rpx;

	}

	.add_cont {
		display: flex;
		align-items: center;
	}

	.add_tit {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.bg {
		background: #F5F5F5;
	}

	.bgs {
		background: #F5F8FF;

	}

    .bgss {
		background: #faf3e3;
	
	}
	.green {
		width: 16rpx;
		height: 16rpx;
		background: #1FC657;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.gray {
		width: 16rpx;
		height: 16rpx;
		background: #cccccc;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.orgin {
		width: 16rpx;
		height: 16rpx;
		background: #FBAC04;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.btn {
		width: 100%;
		height: 78rpx;
		border: 2rpx solid #999999;
		border-radius: 4rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.btn1 {
		width: 100%;
		height: 78rpx;
		background-color: #02B595;
		// background: linear-gradient(87deg, #346EF6 0%, #7BA2FF 100%);
		border-radius: 4rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 收货码弹框 */
	.receipt_code {
		width: 90%;
		margin: 0 auto;
	}

	.code_title {
		width: 100%;
		line-height: 100rpx;
		font-size: 31rpx;
		font-weight: bold;
		text-align: center;
		letter-spacing: 2rpx;
		margin-top: 21rpx;
		margin-bottom: 25rpx;
	}

	::v-deep .u-input--border {
		border: 1px solid #F2F2F2 !important;
		background: #F2F2F2 !important;
		color: #999999 !important;
		font-weight: 500 !important;
		letter-spacing: 2rpx !important;
	}

	::v-deep .u-input__input {
		font-size: 30rpx;
		font-weight: bold;
		flex: 1;
		color: #999999 !important;
		min-height: 85rpx !important;
		margin-top: 7rpx;
	}

	.sure {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(87deg, #346EF6 0%, #7BA2FF 100%);
		color: white;
		border-radius: 46rpx;
		text-align: center;
		line-height: 80rpx;
		margin-top: 30rpx;
		letter-spacing: 2rpx;
	}
</style>